<!DOCTYPE html>
<html>
<head>
	<title>Mathlab - Calculator</title>
<link rel="stylesheet"  href="../jquery-mobile/demos/css/themes/default/jquery.mobile-1.1.0.css" />
<script type="text/javascript" src="../jquery-mobile/demos/js/jquery.js"></script>
<script type="text/javascript" src="../jquery-mobile/demos/js/jquery.mobile-1.1.0.min.js"></script>
<script type="text/javascript" src="../stopwatch/jquery.stopwatch.js"></script>
<script>
	var total = 0;
	var rights = 0;
	$(document).ready(function(){
		operands(10);
		$('input[type=number]').hide();
		
		$('#level').change(function(){
			operands($(this).val());
		});
		
		$('#evaluate').click(function(){
			evaluate();
		});
		
		$('#result').focusout(function() {
			evaluate();
		});
	});
	
	function evaluate(){
		var operator = $('#operator').val();
		var result;
		if(operator == 'addition')
			result = parseInt($('#op1').text()) + parseInt($('#op2').text());
		else if(operator == 'substraction')
			result = parseInt($('#op1').text()) - parseInt($('#op2').text());
		else if(operator == 'multiplication')
			result = parseInt($('#op1').text()) * parseInt($('#op2').text());
		else if(operator == 'division')
			result = parseInt($('#op1').text()) / parseInt($('#op2').text());
		total++;
		
		if(parseInt($('#result').val()) == result){
			rights++;
			$('#feedback').text('Excellent');
		}
		else
			$('#feedback').text('Almost there');
		$('#score').text('Score: ' + score());
		operands($('#level').val());
    $('#result').focus();
	}
	
	function score(){
		return rights.toString() + '/' + total.toString();
	}
	
	function operands(levelFactor){
		var op1 = op(levelFactor);
		var op2 = op(levelFactor);
		
		var operator = $('#operator').val();
		if(levelFactor <= 100 && operator == 'substraction'){
			while(op1 < op2)
				op2 = op(levelFactor);
		}
		
		$('#op1').text(op1);
		$('#op2').text(op2);		
		$('#result').val('');
	}
	
	function op(levelFactor){
		return Math.floor((Math.random()*levelFactor)+1);
	}
	
	$(function() {
		$('#timer').stopwatch();
	});
</script>
</head>
<body>
<div data-role="page"> 
	<div data-role="content">
		<div style="position: relative; text-align: center; style: width=100%; height: 100%">
			<div id="timer">
				<span class="hr">00</span>:<span class="min">00</span>:<span class="sec">00</span>
			</div>
			<label for="level">Difficulty level:</label>
			<input type="range" name="level" id="level" value="10" min="5" max="1000" />
			<h1><label class="operand" id="op1"/></h1>
			<select name="operator" id="operator" data-inline="true">
				<option value="addition">+</option>
				<option value="substraction">-</option>
				<option value="multiplication">x</option>
				<option value="division">&divide;</option>
			</select>
			<h1><label class="operand" id="op2"/></h1>
			<h1>=</h1>
			<input type="tel" name="result" id="result" onUnfocus="send()"/>
			<button type="submit" id="evaluate">Right ?</button>
			<h2><label class="score" id="score"/></h2>
			<h3><label class="feedback" id="feedback"/></h3>
		</div>
	</div>
</div>
</body>
</html>
